<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <base th:href="${#httpServletRequest.getContextPath()} + '/'">
    <title>添加用户</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../../../layui/css/layui.css" th:href="@{layui/css/layui.css}">
    <!-- 引入 layui.js -->
    <script src="../../../layui/layui.js" th:src="@{layui/layui.js}"></script>
</head>
<body style="width: 99%">
<div style="width: 630px">
    <div>
        <div class="layui-card">
            <div class="layui-card-body layui-bg-gray">
                <form class="layui-form" lay-filter="addUserForm">
                    <div class=" layui-form-item" style="display: none">
                        <label class="layui-form-label">id</label>
                        <div class="layui-input-block">
                            <label>
                                <input type="text" name="id" th:value="${employee.id}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">部门</label>
                        <div class="layui-input-block">
                            <label>
                                <select name="deptId">
                                    <option value="1" th:each="dept:${deptList}" th:value="${dept.did}"
                                            th:text="${dept.dname}" th:selected="${employee.deptId eq dept.did}">部门
                                    </option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">职位</label>
                        <div class="layui-input-block">
                            <label>
                                <select name="jobId">
                                    <option value="1" th:each="job:${jobList}" th:value="${job.jid}"
                                            th:text="${job.jname}" th:selected="${employee.jobId eq job.jid}">职位
                                    </option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class=" layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <label>
                                <input type="text" name="name" lay-verify="name" autocomplete="off"
                                       placeholder="请输入姓名" th:value="${employee.name}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">卡号</label>
                        <div class="layui-input-block">
                            <label>
                                <input type="text" name="cardId" lay-verify="cardId" autocomplete="off"
                                       placeholder="请输入卡号" th:value="${employee.cardId}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <label>
                                <input type="text" name="address" lay-verify="notNull" autocomplete="off"
                                       placeholder="请输入地址" th:value="${employee.address}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮编</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="postCode" placeholder="请输入邮编" lay-verify="postCode"
                                       autocomplete="off" th:value="${employee.postCode}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">固话号码</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="tel" placeholder="请输入固话号码 (可不填)"
                                       autocomplete="off" th:value="${employee.tel}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="phone" placeholder="请输入手机号码" lay-verify="phone"
                                       autocomplete="off" th:value="${employee.phone}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">QQ号码</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="qqNum" placeholder="请输入QQ号码" lay-verify="qqNum"
                                       autocomplete="off" th:value="${employee.qqNum}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Email</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="email" placeholder="请输入Email" lay-verify="email"
                                       autocomplete="off" th:value="${employee.email}" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <label>
                                <select name="sex">
                                    <option value="1" th:selected="${employee.sex eq '1'}">男</option>
                                    <option value="2" th:selected="${employee.sex eq '2'}">女</option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">政治面貌</label>
                        <div class="layui-input-block">
                            <label>
                                <select name="party">
                                    <option value="群众" th:selected="${employee.party eq '群众'}">群众</option>
                                    <option value="共青团员" th:selected="${employee.party eq '共青团员'}">共青团员</option>
                                    <option value="党员" th:selected="${employee.party eq '党员'}">党员</option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-block">
                            <label>
                                <input class="layui-input" id="birthday" name="birthday"
                                       th:value="${#dates.format(employee.birthday, 'yyyy-MM-dd')}" placeholder="出生日期">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">民族</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="race" placeholder="请输入民族" lay-verify="notNull"
                                       th:value="${employee.race}" autocomplete="off" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">学历</label>
                        <div class="layui-input-block">
                            <label>
                                <select name="education">
                                    <option value="初中" th:selected="${employee.education eq '初中'}">初中</option>
                                    <option value="高中" th:selected="${employee.education eq '高中'}">高中</option>
                                    <option value="本科" th:selected="${employee.education eq '本科'}">本科</option>
                                    <option value="研究生" th:selected="${employee.education eq '研究生'}">研究生</option>
                                    <option value="博士" th:selected="${employee.education eq '博士'}">博士</option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">专业</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="speciality" placeholder="请输入专业" lay-verify="notNull"
                                       th:value="${employee.speciality}" autocomplete="off" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">爱好</label>
                        <div class="layui-input-block">
                            <label>
                                <input name="hobby" placeholder="请输入爱好 (可不填)"
                                       th:value="${employee.hobby}" autocomplete="off" class="layui-input">
                            </label>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <label>
                                    <textarea placeholder="请输入内容" th:value="${employee.remark}" class="layui-textarea"
                                              name="remark"></textarea>
                            </label>
                        </div>
                    </div>
                    <div class="layui-btn-container" style="margin-left: 435px">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="submit" class="layui-btn" style="margin-right: 0" lay-submit=""
                                lay-filter="modifySubmit">修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        const form = layui.form
            , layer = layui.layer
            , $ = layui.$;


        //自定义验证规则
        form.verify({
            name: [
                /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,5}$/,
                '姓名必须为2-5个字符'
            ]
            , cardId: [
                /^(\d{16}|\d{17}|\d{19})$/,
                '卡号格式错误'
            ]
            , notNull: [
                /^[\s\S]*.*[^\s][\s\S]*$/,
                '此项不能为空'
            ]
            , postCode: [
                /^[0-9]{6}$/,
                '邮编格式错误'
            ]
            , phone: [
                /^1[3456789][0-9]{9}$/
                , '手机号码格式错误'
            ]
            , qqNum: [
                /^[0-9]{1,10}$/,
                'QQ号码格式错误'
            ]
            , email: [
                /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/,
                'Email格式错误'
            ]
            , confirmPass: function (value) {
                if ($('input[name=password]').val() !== value)
                    return '两次密码输入不一致！';
            }
        });

        // 监听提交
        form.on('submit(modifySubmit)', function (data) {
            $.ajax({
                url: "employee/update",
                type: "post",
                data: JSON.stringify(data.field),
                contentType: "application/json;charset=utf8",
                dataType: "json",
                success: function (response) {
                    let code = response.code;
                    if (code == 0) {
                        layer.msg("修改成功!", {icon: 1, offset: "auto", time: 3000});
                        setTimeout(function () {
                            let index = parent.layer.getFrameIndex(window.name); // 获取当前窗口的name
                            parent.layer.close(index);
                        }, 3000);
                    } else {
                        layer.msg("修改失败! " + response.code + " " + response.msg, {
                            icon: 0,
                            offset: "auto",
                            time: 2000
                        });
                    }
                },
                error: function (response) {
                    layer.msg("修改失败! " + response.status + " " + response.statusText, {
                        icon: 0,
                        offset: "auto",
                        time: 2000
                    });
                }
            })
            return false;
        });

        layui.use('laydate', function () {
            let laydate = layui.laydate;
            laydate.render({
                elem: '#birthday'
            });
        });
    });
</script>

</html>